<template>
  <div class="index-container">
    <!-- 导航区域 -->
    <div class="nav">
      <ul>
        <li>
          <router-link to="/tag/discovery">
            <span class="iconfont icon-icon-test"></span>
            发现音乐
          </router-link>
        </li>
        <li>
          <router-link to="/tag/playlists">
            <span class="iconfont icon-gedan"></span>
            推荐歌单
          </router-link>
        </li>
        <li>
          <router-link to="/tag/songs">
            <span class="iconfont icon-music3"></span>
            最新音乐
          </router-link>
        </li>
        <li>
          <router-link to="/tag/mvs">
            <span class="iconfont icon-shipin2"></span>
            最新MV
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 主题区域 -->
    <div class="main">
      <router-view></router-view>
    </div>
    <!-- 播放区域 -->
    <!-- <div class="player">
      <audio ref="player" :src="url" controls autoplay preload="true" @canplay="start" @ended="end"></audio>
    </div> -->
  </div>
</template>

<script>
// import {mapGetters} from 'vuex'
// export default {
//   name: "index",
//   data() {
//     return {
//       // musicUrl: "",
//     };
//   },
//   computed:{
//     ...mapGetters(['id','isPlay','url']),
//   },
//   watch:{
//     isPlay:function(){
//       this.togglePlay();
//     }
//   },
//   methods:{
//     // 获取连接后准备播放
//     start(){
//       // 开始播放
//       let player=this.$refs.player
//       player.play()
//       this.$store.commit('setIsPlay',true)
//     },
//     // 播放结束
//     end(){
//        this.$store.commit('setIsPlay',false)
//     },
//     togglePlay(){
//       // let player=document.querySelector('#player')
//       if(this.isPlay){
//         this.$refs.player.play()
//       }else{
//         this.$refs.player.pause()
//       }
//     },
//   }
// };
</script>

<style >
</style>
